<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('邮件列表')" />
<th:block th:include="include :: list-css" />
<link rel="stylesheet" th:href="@{/js/layuiadmin-1.2.1/lib/extend/wangEditor/wangEditor.min.css}" media="all"/>
<style type="text/css">
	.layui-btn .dh-search:before{color: #1E9FFF}
	.layui-btn .dh-mail-reply:before{color: darkturquoise}
	.dh-folder-open-o:before,.dh-folder:before{color: #CCA077}
	#view-content {position:fixed; bottom:0; left:0; width:100%; height:130px;z-index: 99999;}
	#expander{width:100%; height:6px;}
	#expander:hover{cursor:row-resize;}
	#m-content {overflow-y: auto;padding: 5px 20px;background-color: #fff;border-left: 1px solid #e6e6e6;}
	.close{cursor: pointer;position: absolute;right: 15px;top: 20px;font-size: 20px;}
	.maximize{cursor: pointer;position: absolute;right: 44px;top: 21px;font-size: 18px;}
	.dh-envelope, .dh-envelope-open-o{font-size: 18px;color: cadetblue;}
</style>
</head>
<body>
<div class="main-content">
	<table class="layui-hide" id="dhtable" lay-filter="ftable"></table>
</div>

<div id="view-content" style="display:none;">
	<div class="dhicon dh-remove close" onclick="closeView();"></div>
<!-- 	<div class="dhicon dh-window-maximize maximize" onclick="maximize();"></div> -->
	<div id="expander"></div>
	<div id="m-content" class="w-e-text"></div>
</div>
<script th:src="@{/js/jquery/jquery.min.js}"></script>
<script th:src="@{/js/jquery/jquery.cookie.js}"></script>
<script th:src="@{/js/layuiadmin-1.2.1/layui/layui.js?v=2}"></script>
<script th:src="@{/js/jquery/jquery.blockUI.min.js}"></script>
<script th:src="@{/dhecp/js/dh-common.js?v=53}"></script>
<script th:src="@{/dhecp/js/dh-ui.js?v=37}"></script>

<script th:inline="javascript">
/*<![CDATA[*/
var gridColumns=[[${gridColumns}]],
	moduleTable=[[${moduleTable}]],
	pageType=[[${pageType}]],
	ctx = [[@{/}]],
	session = [[${session}]]
	prefix=[[${prefix}]];
/*]]>*/
</script>
<!-- 表格头部工作栏-->
<script type="text/html" id="toolbar">
	<div class="layui-btn-container">
		{{#  if(pageType == 'inbox'){ }}
			<div class="layui-btn layui-btn-normal layui-table-tools" lay-event="add"><i class="dhicon dh-edit"></i>&nbsp;新建邮件</div>
			<div class="layui-btn layui-table-tools" lay-event="refresh"><i class="dhicon dh-refresh"></i>&nbsp;刷新</div>
		{{#  }else if(pageType == 'draftbox'){ }}
			<div class="layui-btn layui-btn-normal layui-table-tools" lay-event="add"><i class="dhicon dh-edit"></i>&nbsp;新建邮件</div>
			<div class="layui-btn layui-table-tools" lay-event="refresh"><i class="dhicon dh-refresh"></i>&nbsp;刷新</div>
		{{#  }else if(pageType == 'outbox'){ }}
			<div class="layui-btn layui-btn-normal layui-table-tools" lay-event="add"><i class="dhicon dh-edit"></i>&nbsp;新建邮件</div>
			<div class="layui-btn layui-table-tools" lay-event="refresh"><i class="dhicon dh-refresh"></i>&nbsp;刷新</div>
		{{#  }else if(pageType == 'savebox'){ }}
			<div class="layui-btn layui-btn-normal layui-table-tools" lay-event="add"><i class="dhicon dh-edit"></i>&nbsp;新建邮件</div>
			<div class="layui-btn layui-table-tools" lay-event="refresh"><i class="dhicon dh-refresh"></i>&nbsp;刷新</div>
		{{#  }else if(pageType == 'massbox'){ }}
			<div class="layui-btn layui-btn-normal layui-table-tools" lay-event="add"><i class="dhicon dh-edit"></i>&nbsp;新建邮件</div>
			<div class="layui-btn layui-table-tools" lay-event="refresh"><i class="dhicon dh-refresh"></i>&nbsp;刷新</div>
		{{#  }else if(pageType == 'deletedbox'){ }}
			<div class="layui-btn layui-btn-normal layui-table-tools" lay-event="add"><i class="dhicon dh-edit"></i>&nbsp;新建邮件</div>
			<div class="layui-btn layui-table-tools" lay-event="refresh"><i class="dhicon dh-refresh"></i>&nbsp;刷新</div>
		{{#  } }}
	</div>
</script>
<script type="text/html" id="barDh">
	{{#  if(pageType == 'inbox'){ }}
		<a class="layui-btn layui-btn-xs" lay-event="reply"><i class="dhicon dh-mail-reply"></i>&nbsp;回复</a>
		<!-- <a class="layui-btn layui-btn-xs" lay-event="replyAll"><i class="dhicon dh-mail-reply-all"></i>&nbsp;回复全部</a> -->
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="transport"><i class="dhicon dh-external-link"></i>&nbsp;转发</a>
		{{# if(d.mailType == 0 && d.reciveID == session.mandatorUser.userId){ }}
			<a class="layui-btn layui-btn-xs" lay-event="save"><i class="dhicon dh-save"></i>&nbsp;保留</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="remove"><i class="dhicon dh-remove"></i>&nbsp;删除</a>
		{{# }else{ }}
			<a class="layui-btn layui-btn-xs layui-btn-disabled"><i class="dhicon dh-save"></i>&nbsp;保留</a>
			<a class="layui-btn layui-btn-xs layui-btn-disabled"><i class="dhicon dh-remove"></i>&nbsp;删除</a>
		{{#  } }}
	{{#  }else if(pageType == 'draftbox'){ }}
		<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="dhicon dh-edit"></i>&nbsp;编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete2"><i class="dhicon dh-remove"></i>&nbsp;删除</a>
	{{#  }else if(pageType == 'outbox'){ }}
		<a class="layui-btn layui-btn-xs" lay-event="reply"><i class="dhicon dh-mail-reply"></i>&nbsp;回复</a>
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="transport"><i class="dhicon dh-external-link"></i>&nbsp;转发</a>
		<a class="layui-btn layui-btn-xs layui-btn-disabled"><i class="dhicon dh-save"></i>&nbsp;保留</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="remove2"><i class="dhicon dh-remove"></i>&nbsp;删除</a>
	{{#  }else if(pageType == 'savebox'){ }}
		<a class="layui-btn layui-btn-xs" lay-event="reply"><i class="dhicon dh-mail-reply"></i>&nbsp;回复</a>
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="transport"><i class="dhicon dh-external-link"></i>&nbsp;转发</a>
		<a class="layui-btn layui-btn-xs layui-btn-disabled"><i class="dhicon dh-save"></i>&nbsp;保留</a>
		<a class="layui-btn layui-btn-xs layui-btn-disabled"><i class="dhicon dh-remove"></i>&nbsp;删除</a>
	{{#  }else if(pageType == 'massbox'){ }}
		<a class="layui-btn layui-btn-xs" lay-event="reply"><i class="dhicon dh-mail-reply"></i>&nbsp;回复</a>
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="transport"><i class="dhicon dh-external-link"></i>&nbsp;转发</a>
		<a class="layui-btn layui-btn-xs layui-btn-disabled"><i class="dhicon dh-save"></i>&nbsp;保留</a>
		<a class="layui-btn layui-btn-xs layui-btn-disabled"><i class="dhicon dh-remove"></i>&nbsp;删除</a>
	{{#  }else if(pageType == 'deletedbox'){ }}
		<a class="layui-btn layui-btn-xs" lay-event="reply"><i class="dhicon dh-mail-reply"></i>&nbsp;回复</a>
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="transport"><i class="dhicon dh-external-link"></i>&nbsp;转发</a>
		<a class="layui-btn layui-btn-xs layui-btn-disabled"><i class="dhicon dh-save"></i>&nbsp;保留</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete"><i class="dhicon dh-delete"></i>&nbsp;删除</a>
	{{#  } }}
</script>
<script type="text/javascript">
 var fileViewUrl = "[[${fileViewUrl}]]";
 // $("#expander").css('background',parent.logo_color_rgba);
 $("#expander").css("backgroundImage", "linear-gradient(to right,#359FD4,#36B5C8,#25D8AB)");
 var prefix = ctx + prefix,$,layer,form,table,tableIns;
 layui.use(['table','layer','jquery','form'], function () {
	$ = layui.$,layer = layui.layer,form = layui.form,table=layui.table;
	table.render({
		elem: '#dhtable'
		,url: prefix + "/listByProcedure?pageType=" + pageType
		,cols: [[
			{type:'numbers',width: 45, fixed: 'left'}
// 		    ,{type: 'checkbox', fixed: 'left'}
			,{title: '状态', width: 50, align: 'center', templet: function(d) {
				// return d.mailRead ? '<i class="dhicon dh-envelope-open-o"></i>' : '<i class="dhicon dh-envelope"></i>';
				return d.mailICO == 1 ? '<i class="dhicon dh-envelope-open-o"></i>' : '<i class="dhicon dh-envelope"></i>';
			}}
			,{title: '<i class="dhicon dh-paperclip"></i>', width: 50, align: 'center', templet: function(d) {
				// return d.mailFile ? '<i class="dhicon dh-paperclip"></i>' : '';
				return d.fileICO ? '' : '<i class="dhicon dh-paperclip"></i>';
			}}
			,{title: '标签', width: 70, align: 'center', templet: function(d) {
				// return d.mailImportInt ? '<span class="dhicon dh-square" style="color: mediumpurple;"> 急件</span>' : '<span class="dhicon dh-square-o" style="color: dodgerblue;"> 普通</span>';
				return d.mailImport ? '<span class="dhicon dh-square" style="color: mediumpurple;"> 急件</span>' : '<span class="dhicon dh-square-o" style="color: dodgerblue;"> 普通</span>';
			}}
			,{field:'mailTitle', title: '主题', width: 300}
			,{title: '类型', width: 50, align: 'center', templet: function(d) {
				var returnStr = '';
// 				switch (d.reciveKind) {
// 					case 'person':
// 						returnStr = '个人';
// 						break;
// 					case 'org':
// 						returnStr = '公司';
// 						break;
// 					case 'dept':
// 						returnStr = '部门';
// 						break;
// 					case 'position':
// 						returnStr = '岗位';
// 						break;
// 				}
				switch (d.mailType) {
					case 0:
						returnStr = '个人';
						break;
					case 1:
						returnStr = '<span style="color: indianred;">公司</span>';
						break;
					case 2:
						returnStr = '<span style="color: forestgreen;">部门</span>';
						break;
					case 3:
						returnStr = '岗位';
						break;
				}
				return returnStr;
			}}
			,pageType == 'outbox' ? {title: '收件人', width: 210, align: 'center', templet: function(d) {
// 				return d.reviveCaption + '[' + d.reciveID + ']';
				return d.reciveCaption;
			}} : {title: '发件人', width: 210, align: 'center', templet: function(d) {
// 				return d.sendCaption + '[' + d.sendID + ']';
				return d.sendCaption;
			}}
			,pageType == 'outbox' ? {field: 'reciveDepartmentCaption', title: '收件部门', width: 100, align: 'center'} 
									: {field: 'sendDepartmentCaption', title: '发件部门', width: 100, align: 'center'}
			,{field:'sendTime', title: '发件时间', width: 160, align: 'center'}
			,{field:'mailNote', title: '备注', width: 90, align: 'center'}
			,{fixed:'right', title: '操作', width: (pageType == 'draftbox' ? 160 : 300), align: 'center', toolbar: '#barDh'}
		]
		]
		,toolbar: '#toolbar'
		,height:'full-0'
		,autoSort: false
		,page: true
		,loading: true
		,limit: 50
		,limits: [10,50,100,150,300,500]
		,even: true //开启隔行背景
		,defaultToolbar:[]
		,done: function(res, curr, count){
		}
	});
	//监听行双击事件
	table.on('rowDouble(ftable)', function(obj){
		var selectIndex = obj.tr[0].rowIndex;
		if(!obj.data.getFlag){
			showloadings(true);
			$.ajaxSettings.async = false;
			$.get(prefix + '/listById?id=' + encodeURIComponent(obj.data.id), function(res){
				showloadings(false);
				$.ajaxSettings.async = true;
				if(res.code == 0){
					obj.data.mailFile = table.cache.dhtable[selectIndex].mailFile = res.data.mailFile;
					obj.data.mailText = table.cache.dhtable[selectIndex].mailText = res.data.mailText;
					obj.data.readListUser = table.cache.dhtable[selectIndex].mailText = res.data.readListUser;
					obj.data.getFlag = table.cache.dhtable[selectIndex].getFlag = true;
					obj.update({getFlag: true, mailFile: res.data.mailFile, mailText: res.data.mailText});
				}else $.modal.msgError(res.msg);
			})
		}
// 		if (obj.data.mailRead == 0){//已读操作
		if (pageType == 'inbox' && obj.data.mailICO != 1){//收件箱未读转已读操作
			$(obj.tr).find('.dh-envelope').removeClass('dhicon dh-envelope').addClass('dhicon dh-envelope-open-o');
			obj.data.mailRead = 1;
			obj.data.mailICO = 0;
			obj.update({mailRead: 1,mailICO: 1});
			var postData = [];
			if(obj.data.mailType == 0) postData.push({id: obj.data.id, mailRead: 1});//个人邮件
			else{
				var readListUser = '[' + formatDate(new Date()) + ']  [' + session.mandatorUser.userId + '][' + session.mandatorUser.userName + ']';
				if(obj.data.readListUser) readListUser += '\n' + obj.data.readListUser;
// 				obj.update({readListUser: readListUser});
				postData.push({id: obj.data.id, readListUser: readListUser});//群发邮件
			}
			$.post(prefix + "/updateMail", {'mailInfoItems': JSON.stringify(postData)}, function(res){//更新已读标志
				parent.refreshMail();//更新列表显示数量
			});
		}
		var vfileds = '无附件';
		var html = "";
		var filePath ="";
		if(obj.data.mailFile){
			vfileds = '';
			$.each(obj.data.mailFile.split(';'),function(i,v){
				if(v){
					var fileArray = v.split('\\');
					filePath = fileViewUrl+"/profile/"+fileArray[0]+"/"+fileArray[1]+"/"+encodeURI(fileArray[2]);
					html+="<p class='getUpload' style='color: dodgerblue;cursor: pointer;' onclick='window.open(\""+filePath+"\")'>"
							+ "<i class='dhicon dh-paperclip'>&nbsp;</i>"
							+ "<span id='fileFlag'>" + v.split('}]')[1] + "</span></p>";
				}
			})
		}
		$("#m-content").html(html + obj.data.mailText);
		if ($("#view-content").css("display") == "none"){
			$("#view-content").css({'display': 'block', 'height': $(window).height() / 2});
			$("#m-content").css({'display': 'block', 'height': $(window).height() / 2 - 20});
// 			$(".layui-table-body").css({height: "calc(100vh - 120px - " + $(window).height() / 2 + "px)"});
			$(".layui-table-body").css({height: "calc(100vh - 80px - " + $(window).height() / 2 + "px)"});
// 			var caoheight = $(window).height() / 3 + 20;
// 			$(".layui-table-fixed .layui-table-body").css({height: "calc(100vh - 820px - " + caoheight + "px)"});
		}
	});
	//监听表格排序问题
	table.on('sort(ftable)', function (obj) {
		table.reload('dhtable', { //dhtableTable是表格容器id
			initSort: obj,
			where: {
				field: obj.field //排序字段
				,order: obj.type //排序方式
			}
		});
		closeView();
	});
	//监听表头操作区
	table.on('toolbar(ftable)', function(obj){
		var checkStatus = table.checkStatus('dhtable');
	    switch(obj.event){
	    	case 'add'://添加
	    		window.location.href = prefix + '/edit?pageType=add';
	    		break;
	    	case 'refresh'://刷新邮件
	    		table.reload('dhtable');
	    		break;
	    }
	});
	//监听工具条
	table.on('tool(ftable)', function(obj){
		var data = obj.data;
		switch(obj.event){
			case 'edit'://编辑(草稿)
    			window.location.href = prefix + '/edit?pageType=edit&id=' + encodeURIComponent(data.id);
			break; 
			case 'reply'://回复
	    		window.location.href = prefix + '/edit?pageType=reply&id=' + encodeURIComponent(data.id);
				break;
			case 'replyAll'://回复全部
				break;
			case 'transport'://转发
	    		window.location.href = prefix + '/edit?pageType=transport&id=' + encodeURIComponent(data.id);
				break;
			case 'save'://保留
				$.operate.post(prefix + "/updateMail",{'mailInfoItems':JSON.stringify([{id: data.id, mailSave: 1}])},function(result){
					parent.refreshMail();
					allReload(result)
				});
				break;
			case 'remove'://收件人删除
				$.modal.confirmCom("是否删除 【" + data.mailTitle +'】邮件？',function(){
					$.operate.post(prefix + "/updateMail",{'mailInfoItems':JSON.stringify([{id: data.id, reciveDeleted: 1}])},function(result){
						parent.refreshMail();
						allReload(result)
					});
				});
				break;
			case 'remove2'://发件人删除
				$.modal.confirmCom("是否删除 【" + data.mailTitle +'】邮件？',function(){
					$.operate.post(prefix + "/updateMail",{'mailInfoItems':JSON.stringify([{id: data.id, sendDeleted: 1}])},function(result){
						allReload(result)
					});
				});
				break;
			case 'delete'://再删除
				$.modal.confirmCom("是否彻底删除 【" + data.mailTitle +'】邮件？',function(){
					if(data.sendID == session.mandatorUser.userId && data.sendDeleted){
						$.operate.post(prefix + "/updateMail",{'mailInfoItems':JSON.stringify([{id: data.id, sendHided: 1}])},function(result){
							allReload(result)
						});
					}else if(data.reciveID == session.mandatorUser.userId && data.reciveDeleted){
						$.operate.post(prefix + "/updateMail",{'mailInfoItems':JSON.stringify([{id: data.id, reciveHided: 1}])},function(result){
							allReload(result)
						});
					}
				});
				break;
			case 'delete2'://草稿删除
				$.modal.confirmCom("是否彻底删除 【" + data.mailTitle +'】邮件？',function(){
					$.operate.post(prefix + "/deleteMail",{'mailInfoItems':JSON.stringify([{id: data.id}])},function(result){
						allReload(result)
					});
				});
				break;
		}
	});
	//刷新表格
	function allReload(result){
		if(result.code==0){
			setTimeout(function(){
				layer.closeAll();
				table.reload('dhtable');
				closeView()
			}, 1000);
		}
	}
});

//关闭预览
function closeView(){
	$("#view-content").css("display", "none");
	table.resize('dhtable')
}
function reloadTable(url){
	table.reload('dhtable',{url: url});
}
//邮件预览窗口  拖动操作
var src_posi_Y = 0, dest_posi_Y = 0, move_Y = 0, is_mouse_down = false, destHeight = 30;
$("#expander").mousedown(function(e){
	src_posi_Y = e.pageY;
	is_mouse_down = true;
});
$(document).bind("click mouseup",function(e){
	if(is_mouse_down){
		is_mouse_down = false;
	}
}).mousemove(function(e){
	dest_posi_Y = e.pageY;
	move_Y = src_posi_Y - dest_posi_Y;
	src_posi_Y = dest_posi_Y;
	destHeight = $("#view-content").height() + move_Y;
	if(($("#expander").offset().top - move_Y) > 0 && is_mouse_down){
		var v_height = destHeight > 55 ? destHeight : 55;
		$("#view-content").css("height", v_height);
		$("#m-content").css('height', v_height - 30);
		$(".layui-table-body").css({
// 			height: "calc(100vh - 120px - " +v_height+ "px)"
			height: "calc(100vh - 80px - " +v_height+ "px)"
		});
		v_height += 20;
		$(".layui-table-fixed .layui-table-body").css({
// 			height: "calc(100vh - 120px - " +v_height+ "px)"
			height: "calc(100vh - 70px - " +v_height+ "px)"
		});
	}
});
</script>
</body>
</html>